<!--
    * 章节: 04-03-07
    * 用于演示 align-content 属性的使用
    * FilePath: /04-03/align-content.html
    * @Parry
-->
<style type="text/css">
    .align-content {
        display: flex;
        flex-wrap: wrap;
        height: 300px;
        /*替换不同的 align-content 属性值，学习不同属性的不同作用*/
        align-content: space-around;
    }
</style>
<div class="align-content">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <div class="box box--red"></div>
    <div class="box box--green"></div>
</div>